<template>
  <StElDynamicForm :submit-props="{method: 'get'}"
                   :options="options"
                   :origin-prop="{inline: true,labelWidth: '100px'}" :layout="1">
  </StElDynamicForm>
</template>

<script>
export default {
  name: "StElDynamicFormDemo",
  data() {
    return {
      options: [
        {
          field: {
            name: 'text'
          },
          element: {
            label: '文本',
            required: true,
            tips: '这是一个必填的文本'
          }
        },
        {
          field: {
            name: 'text1'
          },
          element: {
            label: '文本1',
            //required: true,
            tips: '这是一个不必填的文本'
          }
        },
        {
          field: {
            name: 'text2'
          },
          element: {
            label: '文本2',
            //required: true,
            disabled: true,
            tips: '这是一个禁用的文本'
          }
        },
        {
          field: {
            name: 'select'
          },
          element: {
            type: 'select',
            label: '下拉',
            options: {
              datas: 'yesNoNum'
            }
          }
        },
        {
          field: {
            name: 'select1',
            value: 1
          },
          element: {
            type: 'select',
            label: '下拉1',
            options: {
              datas: 'yesNoNum' // datas支持url地址请求、自定义数据
            },
            tips: '带默认值'
          }
        },
        {
          field: {
            name: 'radioGroup',
            value: 1
          },
          element: {
            type: 'radioGroup',
            label: '单选',
            options: {
              datas: [
                {
                  id: 1,
                  name: '男'
                },
                {
                  id: 2,
                  name: '女'
                }
              ] // datas支持url地址请求、自定义数据
            },
            tips: '带默认值'
          }
        },
        {
          field: {
            name: 'checkBoxGroup',
            value: [] // 如果是checkbox多选，这里需要设置默认值
          },
          element: {
            type: 'checkBoxGroup',
            label: '多选',
            options: {
              datas: [
                {
                  id: 1,
                  name: '男'
                },
                {
                  id: 2,
                  name: '女'
                }
              ] // datas支持url地址请求、自定义数据
            },
          }
        },
        {
          field: {
            name: 'radioGroupLianDong',
            value: 1
          },
          element: {
            type: 'radioGroup',
            label: '联动单选',
            options: {
              datas: [
                {
                  id: 1,
                  name: '男'
                },
                {
                  id: 2,
                  name: '女'
                }
              ] // datas支持url地址请求、自定义数据
            },
            tips: '在选择女时禁用，并清空 联动文本'
          }
        },
        {
          field: {
            name: 'testLianDong',
            valueDefault: '点击联动单选我将会禁用，并清空'
          },
          element: {
            label: '联动文本',
            options: {
              placeholder: '尝试输入一些内容，并切换 联动单选 男女选项'
            },
            disabled: ({form})=>{ // 可用参数 ｛form,formExtData,$route,$vm｝
              if(form.radioGroupLianDong === 2){
                form.testLianDong = ''
                return true
              }
              return false
            },
            tips: '这是一个可联动的文本'
          }
        },
      ]
    }
  },
  methods: {}
}
</script>

<style scoped>

</style>